<template lang="html">
  <div class="weather">
    <div class="weather_top clear_fixed">
      <img @click="goBack()" class="left" v-bind:src="leftSrc" alt="">
      <p>Weather</p>
    </div>
    <div class="weather_body">
       <p class="city">{{ city }}</p>
       <p class="wendu">{{ wendu }}°</p>
    </div>
    <Wealunbo></Wealunbo>
    <p class="ganmao"><span>友情提示:</span>{{ ganmao }}</p>
  </div>
</template>

<script>
import axios from 'axios'
import Wealunbo from './wealunbo'
export default {

  data(){
    return{
      leftSrc:'../../static/img/left.png',
      city:'',
      wendu:'',
      ganmao:'',
    }
  },
  created(){
    axios.get("http://wthrcdn.etouch.cn/weather_mini?city=北京").then((content)=>{
      console.log(content.data.data);
      this.city = content.data.data.city;
      this.wendu = content.data.data.wendu;
      this.ganmao = content.data.data.ganmao;
      console.log(this.city);
    })
  },
  methods:{
    goBack(){
      history.back();
    },

  },
  components:{
    Wealunbo
  },
}
</script>

<style lang="css">
*{
  margin:0;
  padding:0;
}
.clear_fixed:after{
  content: ".";
  display: block;
  clear: both;
  font-size: 0;
}
.weather_top{
  width:100%;
  height: 4rem;
  /*background-color: white;*/
  border-bottom: 0.08rem solid white;
}
.left{
  float: left;
  margin:1.5rem  0 0 1.5rem;
}
.weather_top p{
  font-size: 3rem;
  line-height: 4rem;
}
.weather_body{
  background:url(../../static/img/1.jpg) no-repeat center center;
  background-size: 100% 100%;
  color: #666;
  text-align: left;
}
.city{
  font-size: 3.5rem;
  color: #fff;
  padding:3rem 0 0 2rem;
}
.wendu{
  font-size: 10rem;
  color: #fff;
  padding:2rem 0 0rem 2rem;
  border-bottom: 1px solid #000;
  font-family: ;
}
.wendu>.type{
  font-size: 2rem;
}
.ganmao{
  font-size: 1.5rem;
  line-height: 2.5rem;
  border-top: 1px solid black;
  padding:2rem 1rem 2.3rem 1rem;
}
.ganmao span{
  color: red
}
</style>
